<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import { reactive, toRef, toRefs } from 'vue'

let person = reactive({
  name: '张飒飒',
  age: 18,
})

function updateName() {
  person.name += '!'
}

function updateAge() {
  person.age += 1
}

// 使用解构赋值，将person对象的里面的属性取出来
// 此次的 toRefs 的作用就是将reactive定义的对象，改成 Ref 定义的对象
let { name, age } = toRefs(person)
let age2 = toRef(person, 'age')
console.log('age', age2.value)
</script>
<template>
  <div class="person">
    <h1>人员信息：</h1>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <h4>姓名：{{ name }}</h4>
    <h4>年龄：{{ age }}</h4>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
